<script>
/**
 *  createTime: "2022-04-15 17:35:16"
    fileMd5: ""
    fileSize: 0
    fileType: 1
    fileUrl: "https://img.xunmengvip.cn/group1/bulky/2022-04-14/9567522cd5274ac888b4e8f6e93dd10f%E7%9A%AE%E5%8D%A1%E4%B8%98.png"
    folderLevel: 1
    id: 2
    lastOperatorId: 0
    lastOperatorName: ""
    name: "皮卡丘.jpg"
    operatorId: 0
    operatorName: ""
    pid: 0
    updateTime: "2022-04-15 17:35:19"
 * 
 */
import { computed, defineComponent } from 'vue'
import { EllipsisOutlined } from '@ant-design/icons-vue'
import { cloneDeep } from 'lodash'

export default defineComponent({
  props: {
    info: {
      type: Object,
      required: true,
    },
    role: {
      type: String,
      default: 'common', //普通模式 common ,trash:垃圾箱
    },
  },
  emits: ['moveTrash', 'remove', 'checkBox', 'recovery'],
  setup(props, context) {
    let role = computed(() => {
      return props.role
    })

    let info = computed(() => {
      return props.info
    })

    let removeHandler = () => {
      context.emit('remove', {
        target: { ...cloneDeep(props.info) },
      })
    }
    let moveToTrashHandler = () => {
      context.emit('moveTrash', {
        target: { ...cloneDeep(props.info) },
      })
    }
    let changeHandler = (e) => {
      context.emit('checkBox', {
        target: { ...cloneDeep(props.info) },
        e: e,
      })
    }
    //恢复
    let recoveryHandler = () => {
      context.emit('recovery', {
        target: { ...cloneDeep(props.info) },
      })
    }
    return {
      info,
      removeHandler,
      moveToTrashHandler,
      changeHandler,
      recoveryHandler,
      role,
    }
  },
  render() {
    return (
      <div>
        <div class="tools">
          <a-dropdown
            vSlots={{
              overlay: () => {
                return (
                  <a-menu>
                    {this.role == 'common' && (
                      <a-menu-item onClick={this.removeHandler}>
                        <a-button size="small" type="link" danger>
                          删除
                        </a-button>
                      </a-menu-item>
                    )}
                    {this.role == 'common' && (
                      <a-menu-item onClick={this.moveToTrashHandler}>
                        <a-button size="small" type="link" danger>
                          备份
                        </a-button>
                      </a-menu-item>
                    )}
                    {this.role == 'trash' && (
                      <a-menu-item onClick={this.recoveryHandler}>
                        <a-button size="small" type="link">
                          恢复
                        </a-button>
                      </a-menu-item>
                    )}
                  </a-menu>
                )
              },
            }}
          >
            <EllipsisOutlined />
          </a-dropdown>
        </div>
        <div class="selector">
          <a-checkbox
            onChange={this.changeHandler}
            checked={this.info.selected}
          />
        </div>
        {this.info.waiting ? (
          <span>
            <a-spin tip="上传中..." />
          </span>
        ) : (
          <a-image
            src={this.info.fileUrl + '?width=120'}
            class="folder_image"
          />
        )}
        {this.info.local_loading && <a-spin />}
      </div>
    )
  },
})
</script>
